Membuat Tabel dengan HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

HTML tabel merupakan struktur data dalam bentuk tabel yang terdiri dari baris dan kolom yang digunakan untuk menampilkan informasi secara terstruktur. Tabel HTML terdiri dari beberapa elemen seperti <table>, <thead>, <tbody>, <tfooter>, <tr>, <th>, dan <td>.

Elemen <table> digunakan untuk menandai awal dan akhir dari tabel, sedangkan elemen <tr> digunakan untuk menandai baris dalam tabel. Elemen <th> digunakan untuk menandai sel header atau judul kolom, sedangkan elemen <td> digunakan untuk menandai sel data atau isi dari tabel.

Contoh sederhana tabel HTML:

No Nama Alamat
1 John Doe Jakarta
2 Jane Smith Bandung

Tabel diatas dibuat dengan menggunakan kode HTML berikut:

<table>
 <thead>
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Alamat</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>1</td>
    <td>John Doe</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Jane Smith</td>
    <td>Bandung</td>
  </tr>
 </tbody>
</table>

 

Membuat Kolom dan Baris Tabel 

Kolom pada tabel HTML di definisikan dengan tag pembuka <td> dan tag penutup </td> yang disematkan pada elemen <tbody>.  Untuk kolom yang merupakan header tabel dibuat dengan menggunakan tag <th>dan </th> yang disematkan pada elemen <thead>.

Contoh membuat kolom header:

<table>
 <thead>
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Alamat</th>
  </tr>
 </thead>
</table>

Contoh membuat kolom pada body tabel:

<table>
 <tbody>
  <tr>
    <td>1</td>
    <td>John Doe</td>
    <td>Jakarta</td>
  </tr>
 </tbody>
</table>

Untuk Membuat baris pada tabel maka menggukan tag pembuka <tr> dan tag penutup </tr>. Contoh:

<table>
 <tbody>
  <tr>
    <td>1</td>
    <td>John Doe</td>
    <td>Jakarta</td>
  </tr>
 </tbody>
</table>

Kode diatas akan menampilkan satu baris tabel yang terdiri dari 3 kolom sebagai berikut.

1 John Doe Jakarta

 

Mengatur Lebar kolom pada tabel

Untuk mengatur lebar kolom pada tabel kita dapat menggunakan property dari CSS. Contoh:

<table style='width:100%'>
 <tbody>
  <tr>
    <td style='width:10%'>1</td>
    <td style='width:40%'>John Doe</td>
    <td style='width:50%'>Jakarta</td>
  </tr>
 </tbody>
</table>

kode Diatas akan menghasilkan tabel sebagai berikut:

1 John Doe Jakarta

Memberikan Background pada Tabel

Untuk memberikan background pada tabel kita dapat menggunakan property background-color CSS. Contoh:

<table>
 <thead>
  <tr style="background-color: #34495e; color:white;">
    <th>No</th>
    <th>Nama</th>
    <th>Alamat</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>1</td>
    <td>John Doe</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Jane Smith</td>
    <td>Bandung</td>
  </tr>
 </tbody>
</table>

Kode diatas akan menghasilkan tabel sebagai berikut:

No Nama Alamat
1 John Doe Jakarta
2 Jane Smith Bandung

 

Colspan dan Rowspan Tabel HTML

#Colspan

Colspan adalah atribut HTML yang digunakan untuk menggabungkan dua atau lebih sel atau kolom menjadi satu kolom yang lebih lebar dengan menggunakan atribut colspan. Contoh:

No Anggota
1 Anggota 1 Anggota 2

Tabel diatas dibuat dengan menggunakan kode HTML berikut:

<table>
  <tbody>
    <tr>
      <th style="border-style: solid; border-width: 1px; text-align: center;">No</th>
      <th style="colspan="2" border-style: solid; border-width: 1px; text-align: center;">Anggota</th>
    </tr>
    <tr>
      <td style="border-style: solid; border-width: 1px; text-align: center;">1</td>
      <td style="border-style: solid; border-width: 1px; text-align: center;">Anggota 1</td>
      <td style="border-style: solid; border-width: 1px; text-align: center;">Anggota 2</td>
    </tr>
  </tbody>
</table>

colspan="2" bearti akan menggabungkan 2 kolom menjadi 1.

#Rowspan

Rowspan adalah atribut HTML yang digunakan untuk menggabungkan dua atau lebih baris menjadi satu baris yang lebih tinggi. Contoh:

Buah Nanas Rambutan
Pepaya Durian

Tabel diatas dibuat dengan kode HTML sebagai berikut:

<table style="width: 33.4093%; height: 44.7812px;">
 <tbody>
  <tr>
   <td rowspan="2" style="border-style: solid; border-width: 1px;">Buah</td>
   <td style="border-style: solid; border-width: 1px;">Nanas</td>
   <td style="border-style: solid; border-width: 1px;">Rambutan</td>
  </tr>
  <tr>
   <td style="border-style: solid; border-width: 1px;">Pepaya</td>
   <td style="border-style: solid; border-width: 1px;">Durian</td>
  </tr>
 </tbody>
</table>

Atribut rowspan="2" digunakan untuk menggabungkan dua baris tabel menjadi satu.

Colgroup HTML

Elemen <colgroup> dalam tabel HTML digunakan untuk mengelompokkan kolom dan menerapkan properti CSS tertentu ke beberapa kolom sekaligus. Elemen <colgroup> dapat digunakan untuk mengurangi pengulangan kode CSS pada setiap kolom, sehingga membuat kode HTML menjadi lebih efisien.

Dalam elemen <colgroup>, dapat didefinisikan beberapa elemen <col> yang merepresentasikan kolom-kolom dalam tabel. Properti CSS dapat ditambahkan pada elemen <col> dan akan diterapkan pada setiap kolom yang diwakili oleh elemen <col> tersebut.

Contoh penggunaan elemen <colgroup> dalam tabel HTML:

Header 1 Header 2
Content 1 Content 2

Tabel Diatas dibuat dengan kode HTML sebagai berikut:

<table>
 <colgroup>
  <col style="background-color: skyblue; font-weight:bold;" />
 </colgroup>
 <tbody>
  <tr>
   <th style="border-style: solid; border-width: 1px;">Header 1</th>
   <th style="border-style: solid; border-width: 1px;">Header 2</th>
  </tr>
  <tr>
   <td style="border-style: solid; border-width: 1px;">Content 1</td>
   <td style="border-style: solid; border-width: 1px;">Content 2</td>
  </tr>
</tbody>
</table>